<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row class="ml10" v-show="showSearch">
        <el-form :inline="true" :model="queryFormData" ref="queryRef">
          <el-form-item label="查询时间">
            <el-date-picker v-model="queryFormData.detectionTime" type="monthrange" start-placeholder="开始时间"
                            end-placeholder="结束时间" format="YYYY-MM" date-format="YYYY/MM"
                            value-format="YYYY-MM"
                            :disabled-date="disabledDate"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="queryBtn" formDialogRef icon="search" type="primary">
              {{ $t('common.queryBtn') }}
            </el-button>
            <el-button @click="resetQuery" formDialogRef icon="Refresh">{{
                $t('common.resetBtn')
              }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <el-row>
        <div class="mb8" style="width: 100%">
          <right-toolbar
              v-model:showSearch="showSearch"
              class="ml10 mr20"
              style="float: right"
              @queryTable="getDataList">
          </right-toolbar>
        </div>
      </el-row>

      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle">
        <el-table-column type="index" label="#" width="60"/>
        <el-table-column prop="code" label="就诊医生工号" show-overflow-tooltip/>
        <el-table-column prop="name" label="就诊医生姓名" show-overflow-tooltip/>
        <el-table-column prop="num" label="就诊记录" show-overflow-tooltip>
          <template #default="scope">
            <el-link type="primary" @click="openView(scope.row)">{{ scope.row.num }}</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <all-see-doctor ref="allSeeDoctorRef"></all-see-doctor>
  </div>
</template>

<script setup lang="ts" name="bloodFamilyDoctor">
import {BasicTableProps, useTable} from '/@/hooks/table';
import {getDirectionRecords} from "/@/api/blood/bloodFamilyDoctor";
import {dayjs} from "element-plus";

const allSeeDoctor = defineAsyncComponent(() => import('./allSeeDoctor.vue'));
const allSeeDoctorRef = ref();

const showSearch = ref(true);
const queryRef = ref();

const queryFormData = reactive({
  // 最近一年的时间
  detectionTime: [
    dayjs().subtract(1, 'year').format('YYYY-MM'),
    dayjs().format('YYYY-MM'),
  ],
});

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    startTime: dayjs().subtract(1, 'year').format('YYYY-MM'),
    endTime: dayjs().format('YYYY-MM'),
  },
  pageList: getDirectionRecords,
  isPage: false,
  loading: false,
});


//  table hook
const {
  getDataList,
  sortChangeHandle,
  tableStyle
} = useTable(state);


const queryBtn = () => {
  if (queryFormData.detectionTime.length > 0) {
    // 判断是否存在 00:00:00  或者 23:59:59，存在则不处理，不存在则添加
    if (queryFormData.detectionTime[0].indexOf('00:00:00') === -1) {
      state.queryForm.startTime = queryFormData.detectionTime[0] + ' 00:00:00';
    }
    if (queryFormData.detectionTime[1].indexOf('23:59:59') === -1) {
      state.queryForm.endTime = queryFormData.detectionTime[1] + ' 23:59:59';
    }
  }
  getDataList();
};

const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields();
  queryFormData.detectionTime = [
    dayjs().subtract(1, 'year').format('YYYY-MM'),
    dayjs().format('YYYY-MM'),
  ];
  state.queryForm.startTime = dayjs().subtract(1, 'year').format('YYYY-MM');
  state.queryForm.endTime = dayjs().format('YYYY-MM');
  getDataList();
};


const openView = (row: any) => {
  allSeeDoctorRef.value.openDialog(row.code, state.queryForm.startTime, state.queryForm.endTime);
};

</script>
